<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${question.title}">问题详情</title>
    <style>
        /* --- 全局和基础样式 --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            background-color: #f4f5f7;
            color: #172b4d;
            margin: 0;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 15px;
        }

        /* 模拟的 Header 占位样式 */
        .header-placeholder {
            background-color: #ffffff;
            padding: 15px 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
            color: #0052cc;
        }

        /* --- 卡片式设计 --- */
        .card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
            padding: 25px;
            margin-bottom: 25px;
        }

        /* --- 排版 --- */
        h1, h2, h3 {
            color: #091e42;
            margin-top: 0;
        }

        h1 {
            font-size: 2em;
            margin-bottom: 10px;
        }

        h2 {
            font-size: 1.5em;
            border-bottom: 1px solid #dfe1e6;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        h3 {
            font-size: 1.3em;
            margin-bottom: 15px;
        }

        .question-meta {
            font-size: 0.9em;
            color: #6b778c;
            margin-bottom: 20px;
        }

        .question-content {
            font-size: 1.1em;
            white-space: pre-wrap; /* 保留内容的换行和空格 */
        }

        /* --- 评论/回答列表 --- */
        .comment-item {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px 0;
            border-bottom: 1px solid #dfe1e6;
        }

        .comment-item:last-child {
            border-bottom: none;
        }

        .comment-content {
            flex-basis: 100%; /* 默认占满整行 */
            margin-bottom: 10px;
        }
        .comment-content strong {
            color: #0052cc;
        }

        .comment-actions {
            margin-left: auto; /* 将操作推到右侧 */
            display: flex;
            align-items: center;
        }

        .adopted-badge {
            font-size: 0.9em;
            font-weight: bold;
            color: #006644;
            background-color: #e3fcef;
            padding: 4px 8px;
            border-radius: 4px;
        }

        /* --- 表单和按钮 --- */
        form {
            margin: 0;
        }

        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #dfe1e6;
            border-radius: 4px;
            font-size: 1em;
            line-height: 1.5;
            resize: vertical;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        textarea:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        .form-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        #char-counter {
            font-size: 0.9em;
            color: #6b778c;
        }

        .btn {
            display: inline-block;
            font-weight: 500;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: 8px 16px;
            font-size: 1em;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
        }

        .btn-primary {
            color: #ffffff;
            background-color: #007bff;
            border-color: #007bff;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .btn-success {
            color: #216e4e;
            background-color: #e3fcef;
            border-color: transparent;
            padding: 5px 10px;
            font-size: 0.9em;
        }

        .btn-success:hover {
            background-color: #c8f0de;
        }
    </style>
</head>
<body>

<div th:replace="~{fragments/header :: header}">
    <div class="header-placeholder">问答社区导航栏</div>
</div>

<div class="container">
    <div class="card">
        <h1 th:text="${question.title}">这是问题的标题</h1>
        <p class="question-meta">
            提问者: <span th:text="${question.username}">User123</span> |
            时间: <span th:text="${#temporals.format(question.createTime, 'yyyy-MM-dd HH:mm')}">2025-06-15 10:30</span>
        </p>
        <div class="question-content" th:text="${question.content}">
            这是问题的详细内容，会详细描述遇到的困难和背景信息。
            这部分内容应该支持换行。
        </div>
    </div>

    <div class="card">
        <h2><span th:text="${#lists.size(comments)}">2</span> 个回答</h2>
        <div th:if="${#lists.isEmpty(comments)}">
            <p>暂无回答，快来抢沙发吧！</p>
        </div>
        <div th:each="comment : ${comments}" class="comment-item">
            <div class="comment-content">
                <p><strong><span th:text="${comment.username}">Answerer456</span>:</strong> <span th:text="${comment.content}">这是第一个回答的内容。</span></p>
            </div>
            <div class="comment-actions">
                <div th:if="${session.loggedInUser != null and session.loggedInUser.id == question.userId and question.hasResolved == 0}">
                    <form class="adopt-form" th:action="@{/qa/comment/{commentId}/adopt(commentId=${comment.id})}" method="post">
                        <input type="hidden" name="questionId" th:value="${question.id}">
                        <button type="submit" class="btn btn-success">采纳此回答</button>
                    </form>
                </div>
                <span th:if="${comment.hasAdopt == 1}" class="adopted-badge">[已采纳]</span>
            </div>
        </div>
    </div>

    <div class="card">
        <h3>我来回答</h3>
        <form th:action="@{/qa/detail/{id}/reply(id=${question.id})}" th:object="${newComment}" method="post">
            <textarea id="reply-content" th:field="*{content}" rows="5" required maxlength="250" placeholder="请在这里写下您的精彩回答..."></textarea>
            <div class="form-actions">
                <div id="char-counter"></div>
                <button type="submit" class="btn btn-primary">提交回答</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        // --- 1. 回答输入框字数统计功能 ---
        const textarea = document.getElementById('reply-content');
        const charCounter = document.getElementById('char-counter');

        if (textarea && charCounter) {
            const maxLength = textarea.getAttribute('maxlength');

            const updateCounter = () => {
                const currentLength = textarea.value.length;
                charCounter.textContent = `${currentLength} / ${maxLength}`;
            };

            // 页面加载时立即更新一次
            updateCounter();

            // 每次输入时更新
            textarea.addEventListener('input', updateCounter);
        }

        // --- 2. 采纳回答确认功能 ---
        const adoptForms = document.querySelectorAll('.adopt-form');

        adoptForms.forEach(form => {
            form.addEventListener('submit', function(event) {
                // 弹出确认框，如果用户点击“取消”，则阻止表单提交
                const isConfirmed = confirm('您确定要采纳这个回答吗？此操作通常无法撤销。');
                if (!isConfirmed) {
                    event.preventDefault();
                }
            });
        });

    });
</script>

</body>
</html>